<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统配置 - 智慧农业管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            background-color: #f8faf6;
            color: #334155;
        }

        /* 顶部导航栏 */
        .header {
            background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
            color: white;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo h1 {
            font-size: 24px;
            font-weight: 700;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-info span {
            margin-right: 15px;
            font-weight: 500;
        }

        .user-info .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #f1f8e9;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #4caf50;
            font-weight: 600;
            cursor: pointer;
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            padding: 8px 0;
            min-width: 160px;
            z-index: 100;
            display: none;
            margin-top: 10px;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-item {
            display: block;
            padding: 10px 20px;
            color: #333;
            text-decoration: none;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: #f1f8e9;
            color: #2e7d32;
        }

        .dropdown-divider {
            height: 1px;
            background-color: #e0e0e0;
            margin: 8px 0;
        }

        /* 主内容区域 */
        .main-content {
            display: flex;
            min-height: calc(100vh - 80px);
        }

        /* 左侧导航 */
        .sidebar {
            width: 220px;
            background: #e8f5e9;
            padding: 20px 0;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 5;
        }

        .nav-group {
            margin-bottom: 30px;
        }

        .nav-title {
            color: #2e7d32;
            font-size: 16px;
            font-weight: 600;
            padding: 10px 25px;
            margin-bottom: 10px;
        }

        .nav-item {
            display: block;
            padding: 12px 25px;
            color: #334155;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .nav-item:hover {
            background-color: #c8e6c9;
            color: #2e7d32;
        }

        .nav-item.active {
            background-color: #a5d6a7;
            color: #2e7d32;
            font-weight: 500;
            border-left: 4px solid #4caf50;
        }

        /* 内容区域 */
        .content {
            flex: 1;
            padding: 30px;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #2e7d32;
            margin-bottom: 20px;
        }

        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-bottom: 25px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #334155;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-primary {
            background-color: #4caf50;
            color: white;
        }

        .btn-primary:hover {
            background-color: #388e3c;
        }

        .btn-danger {
            background-color: #f44336;
            color: white;
        }

        .btn-danger:hover {
            background-color: #d32f2f;
        }

        /* 表格样式 */
        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        th {
            background-color: #f1f8e9;
            font-weight: 600;
            color: #2e7d32;
        }

        tr:hover {
            background-color: #f9f9f9;
        }

        .actions {
            display: flex;
            gap: 10px;
        }

        .btn-small {
            padding: 5px 10px;
            font-size: 12px;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #2e7d32;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #757575;
        }

        .modal-body {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #374151;
        }

        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
        }

        .form-textarea {
            min-height: 100px;
            resize: vertical;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: #4caf50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #4caf50;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .status-cell {
            display: flex;
            align-items: center;
        }

        .status-text {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<!-- 顶部导航 -->
<div class="header">
    <div class="logo">
        <div class="logo-icon">🌱</div>
        <h1>智慧农业管理系统</h1>
    </div>
    <div class="user-info">
        <span>管理员</span>
        <div class="avatar" id="userAvatar">管</div>
        <div class="dropdown-menu" id="userDropdown">
            <a href="#" class="dropdown-item" onclick="showProfile()">个人设置</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item" onclick="logout()">退出登录</a>
        </div>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <!-- 左侧导航 -->
    <div class="sidebar">
        <div class="nav-group">
            <div class="nav-title">系统导航</div>
            <a href="main.jsp" class="nav-item">系统首页</a>
            <a href="deviceManagement.jsp" class="nav-item">设备管理</a>
        </div>

        <div class="nav-group">
            <div class="nav-title">农业管理</div>
            <a href="environmentMonitor.jsp" class="nav-item">环境监测</a>
            <a href="pestControl.jsp" class="nav-item">病虫害防治</a>
            <a href="irrigationControl.jsp" class="nav-item">灌溉施肥</a>
        </div>

        <div class="nav-group">
            <div class="nav-title">系统设置</div>
            <a href="userServlet?actionType=list" class="nav-item">用户管理</a>
            <a href="system_config.jsp" class="nav-item active">系统配置</a>
            <a href="tech.jsp" class="nav-item">技术支持</a>
            <a href="we.jsp" class="nav-item">关于我们</a>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <h1 class="page-title">系统配置</h1>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">定时任务配置</h2>
                <button class="btn btn-primary" onclick="showAddTaskModal()">添加任务</button>
            </div>

            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>任务名称</th>
                            <th>任务描述</th>
                            <th>执行周期</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="taskTableBody">
                        <!-- 任务数据将通过JavaScript渲染 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 添加任务模态框 -->
<div class="modal" id="addTaskModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">添加定时任务</h3>
            <button class="modal-close" onclick="closeAddTaskModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="addTaskForm">
                <div class="form-group">
                    <label class="form-label">任务名称</label>
                    <input type="text" id="addTaskName" name="taskName" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">任务描述</label>
                    <textarea id="addTaskDesc" name="taskDesc" class="form-textarea" required></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">执行周期</label>
                    <select id="addTaskCycle" name="taskCycle" class="form-select" required>
                        <option value="">请选择执行周期</option>
                        <option value="每天">每天</option>
                        <option value="每周">每周</option>
                        <option value="每月">每月</option>
                        <option value="每小时">每小时</option>
                        <option value="自定义">自定义</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">状态</label>
                    <div class="status-cell">
                        <label class="switch">
                            <input type="checkbox" id="addTaskStatus" name="taskStatus" checked>
                            <span class="slider"></span>
                        </label>
                        <span class="status-text">启用</span>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="closeAddTaskModal()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addTask()">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑任务模态框 -->
<div class="modal" id="editTaskModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">编辑定时任务</h3>
            <button class="modal-close" onclick="closeEditTaskModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="editTaskForm">
                <input type="hidden" id="editTaskId" name="taskId">
                <div class="form-group">
                    <label class="form-label">任务名称</label>
                    <input type="text" id="editTaskName" name="taskName" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">任务描述</label>
                    <textarea id="editTaskDesc" name="taskDesc" class="form-textarea" required></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">执行周期</label>
                    <select id="editTaskCycle" name="taskCycle" class="form-select" required>
                        <option value="每天">每天</option>
                        <option value="每周">每周</option>
                        <option value="每月">每月</option>
                        <option value="每小时">每小时</option>
                        <option value="自定义">自定义</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">状态</label>
                    <div class="status-cell">
                        <label class="switch">
                            <input type="checkbox" id="editTaskStatus" name="taskStatus">
                            <span class="slider"></span>
                        </label>
                        <span class="status-text">启用</span>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="closeEditTaskModal()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateTask()">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // 模拟定时任务数据
    let tasks = [
        {
            id: 1,
            name: "环境数据采集",
            description: "定时采集温度、湿度、光照强度等环境数据",
            cycle: "每小时",
            status: true
        },
        {
            id: 2,
            name: "灌溉系统检查",
            description: "检查灌溉系统运行状态，确保正常工作",
            cycle: "每天",
            status: true
        },
        {
            id: 3,
            name: "病虫害预警分析",
            description: "分析环境数据，预测病虫害风险",
            cycle: "每天",
            status: true
        },
        {
            id: 4,
            name: "数据备份",
            description: "定期备份系统数据，防止数据丢失",
            cycle: "每周",
            status: true
        },
        {
            id: 5,
            name: "设备状态巡检",
            description: "检查所有设备在线状态和运行参数",
            cycle: "每6小时",
            status: false
        }
    ];

    // 渲染任务列表
    function renderTasks() {
        const taskTableBody = document.getElementById('taskTableBody');
        taskTableBody.innerHTML = '';

        tasks.forEach(task => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${task.id}</td>
                <td>${task.name}</td>
                <td>${task.description}</td>
                <td>${task.cycle}</td>
                <td>
                    <div class="status-cell">
                        <label class="switch">
                            <input type="checkbox" ${task.status ? 'checked' : ''} onchange="toggleTaskStatus(${task.id})">
                            <span class="slider"></span>
                        </label>
                        <span class="status-text">${task.status ? '启用' : '禁用'}</span>
                    </div>
                </td>
                <td class="actions">
                    <button class="btn btn-primary btn-small" onclick="editTask(${task.id})">编辑</button>
                    <button class="btn btn-danger btn-small" onclick="deleteTask(${task.id})">删除</button>
                </td>
            `;
            taskTableBody.appendChild(row);
        });
    }

    // 切换任务状态
    function toggleTaskStatus(taskId) {
        const task = tasks.find(t => t.id === taskId);
        if (task) {
            task.status = !task.status;
            renderTasks();
            alert(`任务"${task.name}"已${task.status ? '启用' : '禁用'}`);
        }
    }

    // 显示添加任务模态框
    function showAddTaskModal() {
        document.getElementById('addTaskModal').style.display = 'flex';
        document.getElementById('addTaskForm').reset();
    }

    // 关闭添加任务模态框
    function closeAddTaskModal() {
        document.getElementById('addTaskModal').style.display = 'none';
    }

    // 添加任务
    function addTask() {
        const taskName = document.getElementById('addTaskName').value.trim();
        const taskDesc = document.getElementById('addTaskDesc').value.trim();
        const taskCycle = document.getElementById('addTaskCycle').value;
        const taskStatus = document.getElementById('addTaskStatus').checked;

        // 表单验证
        if (!taskName) {
            alert('请输入任务名称');
            return;
        }

        if (!taskDesc) {
            alert('请输入任务描述');
            return;
        }

        if (!taskCycle) {
            alert('请选择执行周期');
            return;
        }

        // 创建新任务
        const newTask = {
            id: tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1,
            name: taskName,
            description: taskDesc,
            cycle: taskCycle,
            status: taskStatus
        };

        // 添加到任务列表
        tasks.push(newTask);
        renderTasks();
        closeAddTaskModal();
        alert('任务添加成功');
    }

    // 编辑任务
    function editTask(taskId) {
        const task = tasks.find(t => t.id === taskId);
        if (task) {
            // 填充表单
            document.getElementById('editTaskId').value = task.id;
            document.getElementById('editTaskName').value = task.name;
            document.getElementById('editTaskDesc').value = task.description;
            document.getElementById('editTaskCycle').value = task.cycle;
            document.getElementById('editTaskStatus').checked = task.status;

            // 显示模态框
            document.getElementById('editTaskModal').style.display = 'flex';
        }
    }

    // 关闭编辑任务模态框
    function closeEditTaskModal() {
        document.getElementById('editTaskModal').style.display = 'none';
    }

    // 更新任务
    function updateTask() {
        const taskId = parseInt(document.getElementById('editTaskId').value);
        const taskName = document.getElementById('editTaskName').value.trim();
        const taskDesc = document.getElementById('editTaskDesc').value.trim();
        const taskCycle = document.getElementById('editTaskCycle').value;
        const taskStatus = document.getElementById('editTaskStatus').checked;

        // 表单验证
        if (!taskName) {
            alert('请输入任务名称');
            return;
        }

        if (!taskDesc) {
            alert('请输入任务描述');
            return;
        }

        // 更新任务
        const task = tasks.find(t => t.id === taskId);
        if (task) {
            task.name = taskName;
            task.description = taskDesc;
            task.cycle = taskCycle;
            task.status = taskStatus;

            renderTasks();
            closeEditTaskModal();
            alert('任务更新成功');
        }
    }

    // 删除任务
    function deleteTask(taskId) {
        if (confirm('确定要删除该任务吗？此操作不可恢复！')) {
            const taskIndex = tasks.findIndex(t => t.id === taskId);
            if (taskIndex !== -1) {
                const taskName = tasks[taskIndex].name;
                tasks.splice(taskIndex, 1);
                renderTasks();
                alert(`任务"${taskName}"删除成功`);
            }
        }
    }

    // 用户下拉菜单功能
    document.addEventListener('DOMContentLoaded', function() {
        const userAvatar = document.getElementById('userAvatar');
        const userDropdown = document.getElementById('userDropdown');

        // 点击头像显示/隐藏下拉菜单
        userAvatar.addEventListener('click', function(e) {
            e.stopPropagation();
            userDropdown.classList.toggle('show');
        });

        // 点击页面其他地方隐藏下拉菜单
        document.addEventListener('click', function() {
            userDropdown.classList.remove('show');
        });

        // 阻止下拉菜单内部点击事件冒泡
        userDropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });

        // 初始化任务列表
        renderTasks();
    });

    // 显示个人设置
    function showProfile() {
        window.location.href = 'profile.jsp';
    }

    // 退出登录
    function logout() {
        if (confirm('确定要退出登录吗？')) {
            fetch('logout', {
                method: 'POST'
            })
            .then(response => {
                if (response.ok) {
                    window.location.href = 'login.jsp';
                } else {
                    alert('退出登录失败，请稍后再试');
                }
            })
            .catch(error => {
                console.error('退出登录失败:', error);
                alert('退出登录失败，请稍后再试');
            });
        }
    }
</script>
</body>
</html>
